<template>
  <page-container>
    <a-card>
      <a-form :form="form">
        <a-row>
          <a-col :span="8">
            <a-form-item label="规则集名称" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
              <a-input
                v-decorator="[
                  'gender',
                  {
                    rules: [{ required: true, message: 'Please input your note!' }]
                  }
                ]"
                placeholder="规则集名称"
              />
            </a-form-item>
          </a-col>

          <a-col :span="15" :offset="1">
            <a-form-item label="规则集描述" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
              <a-input
                v-decorator="[
                  'gender',
                ]"
                placeholder="请输入规则集描述"
              />
            </a-form-item>
          </a-col>

          <a-col :span="4">
            <a-form-item label="额度配置" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }" style="margin-bottom: 10px;">
              <!-- <a-auto-complete
                v-decorator="[{ rules: [{ required: true, message: 'Please input website!' }] }]"
                placeholder="website"
                @change="handleChange"
              > -->
              <a-select default-value="jack1">
                <a-select-option value="jack1">
                  &gt;
                </a-select-option>
                <a-select-option value="lucy2">
                  &gt;=
                </a-select-option>
                <a-select-option value="lucy3">
                  &lt;
                </a-select-option>
                <a-select-option value="lucy4">
                  &lt;=
                </a-select-option>
              </a-select>
              <!-- </a-auto-complete> -->
            </a-form-item>
          </a-col>

          <a-col :span="4">
            <a-form-item style="margin-left: 8px;margin-bottom: 10px;" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
              <a-input
                v-decorator="[
                  'gender',
                ]"
                placeholder="规则集名称"
              />
            </a-form-item>
          </a-col>
    
          <a-col :span="4">
            <a-form-item style="margin-left: 8px;margin-bottom: 10px;" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
              <a-input
                v-decorator="[
                  'gender',
                ]"
                placeholder="授信额度为全额"
              />
            </a-form-item>
          </a-col>


           <a-col :span="12">
             <div style="height: 50px;"></div>
           </a-col>

           <a-col :span="4">
            <a-form-item label=" " :colon="false" :label-col="{ span: 12 }" :wrapper-col="{ span: 12 }">
              <a-select default-value="jack1">
                <a-select-option value="jack1">
                  &gt;
                </a-select-option>
                <a-select-option value="lucy2">
                  &gt;=
                </a-select-option>
                <a-select-option value="lucy3">
                  &lt;
                </a-select-option>
                <a-select-option value="lucy4">
                  &lt;=
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="4">
            <a-form-item style="margin-left: 8px;" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
              <a-input
                v-decorator="[
                  'gender',
                ]"
                placeholder="规则集名称"
              />
            </a-form-item>
          </a-col>
    
          <a-col :span="4">
            <a-form-item style="margin-left: 8px;" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
              <a-input
                v-decorator="[
                  'gender',
                ]"
                placeholder="授信额度为全额"
              />
            </a-form-item>
          </a-col>

           <a-col :span="2">
            <a-form-item style="margin-left: 8px;" :colon="false" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
              <a-select default-value="jack1">
                <a-select-option value="jack1">
                  &gt;
                </a-select-option>
                <a-select-option value="lucy2">
                  &gt;=
                </a-select-option>
                <a-select-option value="lucy3">
                  &lt;
                </a-select-option>
                <a-select-option value="lucy4">
                  &lt;=
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

           <a-col :span="10"></a-col>

          <!-- <a-col :span="15" :offset="1">
            <a-form-item label="结果说明" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
              <a-input
                v-decorator="[
                  'gender',
                ]"
                placeholder="结果说明"
              />
            </a-form-item>
          </a-col> -->
        </a-row>
      </a-form>
    </a-card>

    <a-card class="card">
      <div class="decision-mak-container">
        <div class="container index-container">
          <div class="selects-container">
            <div class="select-item">
              <a-select class="select" default-value="lucy" @change="handleChange">
                <a-select-option value="jack">
                  信用总分
                </a-select-option>
                <a-select-option value="lucy">
                  偿还能力总分
                </a-select-option>
              </a-select>
              <div class="icon">
                <a-icon type="minus-circle" />
              </div>
            </div>
            <div class="select-item">
              <a-select class="select" default-value="lucy" @change="handleChange">
                <a-select-option value="jack">
                  信用总分
                </a-select-option>
                <a-select-option value="lucy">
                  偿还能力总分
                </a-select-option>
              </a-select>
              <div class="icon">
                <a-icon type="minus-circle" />
              </div>
            </div>
            <div class="select-item">
              <a-select class="select" default-value="lucy" @change="handleChange">
                <a-select-option value="jack">
                  信用总分
                </a-select-option>
                <a-select-option value="lucy">
                  偿还能力总分
                </a-select-option>
              </a-select>
              <div class="icon">
                <a-icon type="plus-circle" />
              </div>
            </div>
          </div>
        </div>

        <div class="container implement-container">
          <div class="implement-item">
            <h2>指标名称</h2> <h2>得分</h2>
          </div>
          <div class="implement-item">
            <div class="implement-item-content">额度积分</div> <div class="implement-item-content">300</div>
          </div>
        </div>
      </div>

      <div class="submit-container">
        <a-button type="primary">
          提 交
        </a-button>
        <a-button class="button">取 消</a-button>
      </div>
    </a-card>
  </page-container>
</template>

<script>

export default {
  data () {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
    }
  },

  methods: {
    handleSubmit () {},
  },
}
</script>

<style lang="scss" scoped>
.card {
  margin-top: $margin-sm;
}

.decision-mak-container {
  display: flex;

  & > .container {
    padding: $padding-xs;
    border: 1px solid $gray-16;
    height: 400px;

    overflow-y: auto;
  }
  .index-container {
    width: 300px;

    .selects-container {
      .select-item {
        display: flex;
        align-items: center;
        margin-bottom: $margin-sm;
        .select {
          flex: 1;
        }

        .icon {
          padding-left: 20px;
          font-size: 22px;
          cursor: pointer;
          line-height: 1em;
          color: rgba($color: #000000, $alpha: 0.3);
          transition: color .4s;
        }

        .icon:hover {
          color: $theme-color;
          font-weight: bold;
        }
      }
    }
  }

  .implement-container {
    flex: 1;
    margin-left: $margin-sm;
    .implement-item {
      display: flex;
      justify-content: space-around; 
      h2 {
        align-items: left;
      }
      .implement-item-content {
        border: 1px solid;
        width: 300px;
      }
    }
  }
}
.submit-container {
  margin-top: $margin-sm;
  .button {
    margin-left: $margin-xs;
  }
}
</style>
